<div id="root">
  <qf-table :data="tableData">
    <qf-table-column prop="id" label="编号1"></qf-table-column>
    <qf-table-column prop="id" label="编号2"></qf-table-column>
    <qf-table-column prop="name" label="姓名"></qf-table-column>
    <qf-table-column prop="age" label="年龄"></qf-table-column>
    <qf-table-column label="性别">
      <template slot-scope="item"> {{ item.sex == 1 ? '女' : '男' }} </template>
    </qf-table-column>
  </qf-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  Vue.component("qfTableColumn", {
    props: ['prop', 'label'],
    template: `<span />`,
    mounted() {
      //console.log(this);
      //console.log(this.$parent);
      this.$parent.column.push(this)
    }
  });

  Vue.component("qfTable", {
    data() {
      return {
        column: [

        ],
      }
    },
    mounted() {
      console.log(this.column);
      console.log(this.column[4].$scopedSlots.default({ sex: 1 })[0].text);
    },
    props: {
      data: {
        type: Array,
        default: []
      }
    },
    template: `<table border="1" cellpadding="10" cellspacing="0">
      <thead>
       <tr>
         <th v-for="item in column">{{item.label}}</th>
       </tr>
      </thead>
      <tbody>
      <tr v-for="row in data">
        <!-- 
          <td>{{row.id}}</td>
        <td>{{row.name}}</td>
        <td>{{row.age}}</td>
        <td>暂不写</td>
          -->
        <td v-for="(col,i) in column">
          {{column[i].$scopedSlots.default ? column[i].$scopedSlots.default(row)[0].text : row[col.prop]}}
          </td>
      </tr>
       <!-- 默认插槽：因为调用了所以才提示组件不存在 -->
       <slot></slot>
      </tbody>
    </table>`,
  });
  const vm = new Vue({
    el: "#root",
    data: {
      tableData: [
        { id: 1, name: "张三", age: 3, sex: 0 },
        { id: 2, name: "赵四", age: 18, sex: 1 },
        { id: 3, name: "王五", age: 32, sex: 0 },
        { id: 4, name: "王二", age: 19, sex: 1 },
      ],
    },
    methods: {},
  });
</script>